<template>
  <div class="produce-out-wrap">
    <!-- 采购订单 -->
    <PageTop firstMenu="配料采购" secondMenu="采购退货" title="采购退货" @add-thing="$to('supplierReturnCreate')"></PageTop>
    <div class="search-container">
      <el-select class="right-margin" clearable size="small" v-model="category" placeholder="选择退货状态">
        <el-option v-for="item in categorys" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>

      <div class="search-wrap">
        <el-input size="small" class="search" clearable v-model="keyword" placeholder="输入关键字搜索"></el-input>
        <el-button plain size="small" type="primary" @click="getData">查询</el-button>
      </div>
    </div>
    <tableList :tableData="listData" @getData="getData"></tableList>

     <div class="page-wrap">
      <el-pagination 
      class="page-count" 
      @current-change="getData" 
      background layout="total, prev, pager, next" 
      :total="totalCount" 
      :current-page.sync='page' 
      :page-size="15"></el-pagination>
    </div>

  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import tableList from '@/tables/supplier/supplierReturnTable.vue';
import AjaxResquest from '@/api/apiRequest';
import PageTop from '@/components/pageTop.vue';

@Component({
  components: {
    tableList,
    PageTop
  }
})
export default class ProduceOut extends Vue {
  orderRes!: AjaxResquest;
  listData: any[] = [];
  page: number = 1;
  pageSize: number = 15;
  totalCount: number = 0;

  categorys: any[] = [
    { value: '1', label: '已完成' },
    { value: '2', label: '已作废' }
  ];
  keyword: string = '';
  category: string = '';
  date: string = '';
  ajaxData = {
    page: this.page,
    pageSize: this.pageSize
  };
  mounted() {
    this.orderRes = new AjaxResquest('/purchase/returnOrderList');
    // this.categoryRes = new AjaxResquest('/goods/getClassList');
    // this.getCategory();

    this.getData();
  }
  // getCategory() {
  //   this.categoryRes.getFunction().then((res: any) => {
  //     console.log(res.data);
  //     this.categorys = res.data.data.types;
  //   });
  // }
  // getList(): void {
  //   this.orderRes.getFunction(this.ajaxData).then((res:any) => {
  //     if (res.data.code === 1) {
  //       this.listData = res.data.data.types;
  //       this.totalCount = res.data.data.allCount;
  //     }
  //   });
  // }
  pageChange(val: number): void {
    this.$set(this.ajaxData, 'page', val);
    this.orderRes.getFunction(this.ajaxData);
  }
  getData(): void {
    let data = {
      page: this.page,
      pageSize: this.pageSize,
      keyWord: this.keyword,
      status: this.category
    };
    this.orderRes.getFunction(data).then((res:any) => {
      if (res.data.code === 1) {
        this.listData = res.data.data.types;
        this.totalCount = res.data.data.allCount;
      }
    });
  }
}
</script>
<style lang="less">
.produce-out-wrap {
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
  .page-count-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding: 0;
    margin-bottom: 15px;
  }
  .search-container {
    text-align: left;
    margin-bottom: 15px;
  }
  .search {
    margin-top: 15px;
    width: 250px;
    margin-right: 10px;
  }
}
</style>
